<!-- 染缸排缸查询 -->
<template>
    <div class="main-container" id="main-container">
       <div style="background-color: #fff; height:100%;" id="vatExhautQuery">
          <a-tabs   :lazy-load="true" type="card" @change="tabsChange" justify>
                <a-tab-pane title="排缸信息" key="1">
                   <div style="height: 100%;">
                       <cylinderInfo /> 
                     </div>
                </a-tab-pane>    
                <a-tab-pane title="未排缸信息" key="2">   
                     <div style="height: 100%;">     
                       <unCylinderInfo />    
                     </div> 
                </a-tab-pane> 
                <a-tab-pane title="回修信息" key="3">  
                     <div style="height: 100%;">
                       <repairInfo />     
                    </div> 
                </a-tab-pane>  
                <a-tab-pane title="出库信息" key="4">   
                     <div style="height: 100%;"> 
                       <outboundInfo />     
                    </div> 
                </a-tab-pane>   
          </a-tabs>
       </div>    
   </div> 
   
</template>  

<script lang="ts"> 
  import { defineComponent } from 'vue'
  import emitter from '@/hooks/useEventBus'
  export default defineComponent({
       name:'vatExhautQuery',
       setup() { 
           const tabsChange = (e:string | number) => {
               emitter.emit('window-change'); 
               if(e === '1'){ 
                   emitter.emit('refresh-cylinderInfo') 
               }else if(e === '2'){
                   emitter.emit('refresh-unCylinderInfo') 
               }else if(e === '3'){  
                   emitter.emit('refresh-repairInfo') 
               }else if(e === '4'){
                   emitter.emit('refresh-outboundInfo') 
               }
           }
           return {
              tabsChange
           }
       },
  })
</script>

<style scoped>
.main-container {
  height: 100%;
}
.arco-drawer-title{
   width: inherit;
}
.arco-drawer-body .arco-scrollbar-track-direction-horizontal{
    display: none;
}
.arco-drawer-body .arco-table-container .arco-scrollbar-track-direction-horizontal{
    display: block;
}
:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}
</style>